<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=0, minimum-scale=1.0, maximum-scale=1.0">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <meta name="format-detection" content="telephone=no">
    <link rel="shortcut icon" href="../images/favicon.ico">
    <link rel="apple-touch-icon-precomposed" href="../images/apple-touch-icon.png">
    <title>titlebar</title>
    <link rel="stylesheet" href="../scripts/lib/seedsui/seedsui.min.css">
    <style type="text/css">
    input[type=search].search,input[type=text].search{
        padding-top:6px;
        padding-bottom:6px;
    }
    .inputbox-white{
        border-color: rgba(255,255,255,.7);
    }
    .inputbox-white .input-text[type=search],.inputbox-white .icon{
        color: white;
    }
    .inputbox-white .icon{
        opacity: 0.7;
    }
    .inputbox-white .input-text[type=search]::-webkit-input-placeholder{
        color:white;
        opacity: 0.7;
    }
    </style>
</head>

<body ontouchstart="">
	<header>
        <div class="titlebar">
            <a class="titlebar-button" href="javascript:back()">
                <i class="icon icon-arrowleft"></i>
            </a>
            <h1 class="titlebar-title">Titlebar</h1>
        </div>
    </header>
	<article>
        <div class="sliver underline">
            <span class="peg"></span>
            <p class="sliver-title">titlebar</p>
        </div>
        <br/>
        <div class="titlebar">
            <a class="titlebar-button">
                <i class="icon icon-arrowleft"></i>
            </a>
            <h1 class="titlebar-title">左右图标titlebar</h1>
            <a class="titlebar-button">
                <i class="icon icon-rdoadd"></i>
            </a>
            <a class="titlebar-button">
                <i class="icon icon-search"></i>
            </a>
        </div>
        <br/>
        <div class="titlebar">
            <a class="titlebar-button button size32 radiusround outline titlebar-left" href="javascript:history.go(-1)">
                <i class="icon icon-arrowleft size20"></i>
            </a>
            <h1 class="titlebar-title text-center">titlebar圆形图标</h1>
            <div class="titlebar-right">
                <a class="titlebar-button button size32 radiusround outline">
                    <i class="icon icon-rdoadd size20"></i>
                </a>
                <a class="titlebar-button button size32 radiusround outline">
                    <i class="icon icon-search size20"></i>
                </a>
            </div>
        </div>
        <br/>
        <div class="titlebar">
            <h1 class="titlebar-title" style="padding: 0 10px;">右按钮titlebar</h1>
            <div class="titlebar-right">
            <a class="titlebar-button button outline radius40" style="padding:0 8px;">按钮</a>
            <a class="titlebar-button button outline radius40" style="padding:0 8px;">
                <i class="icon icon-gear size20"></i>
                <label>设置</label>
            </a>
            </div>
        </div>
        <br/>
        <div class="titlebar">
            <h1 class="titlebar-title" style="padding: 0 10px;">右图标titlebar</h1>
            <div class="titlebar-right">
            <a class="titlebar-button">
                <i class="icon icon-rdoadd"></i>
            </a>
            <a class="titlebar-button">
                <i class="icon icon-search"></i>
            </a>
            </div>
        </div>
        <br/>
        <div class="titlebar">
            <a class="titlebar-button" href="javascript:back()">
                <i class="icon icon-arrowleft"></i>
                <span>返回</span>
            </a>
            <h1 class="titlebar-title text-center">传统titlebar</h1>
            <a class="titlebar-button">
                <i class="icon icon-search"></i>
                <span>搜索</span>
            </a>
        </div>
        <br/>

        <div class="titlebar">
            <div class="inputbox radius40 bordered" style="margin:0 8px;" data-input="clear">
                <input type="search" placeholder="请输入搜索内容" class="search input-text" />
                <i class="icon icon-clear-fill color-placeholder" style="margin-right: 4px;"></i>
            </div>
            <a class="titlebar-button">搜索</a>
        </div>
        <br/>
        
        <div class="sliver underline">
            <span class="peg"></span>
            <p class="sliver-title">titlebar reverse</p>
        </div>
        <br/>
        <div class="titlebar reverse">
            <a class="titlebar-button" href="javascript:back()">
                <i class="icon icon-arrowleft"></i>
            </a>
            <h1 class="titlebar-title">左右图标titlebar</h1>
            <a class="titlebar-button">
                <i class="icon icon-rdoadd"></i>
            </a>
            <a class="titlebar-button">
                <i class="icon icon-search"></i>
            </a>
        </div>
        <br/>
        <div class="titlebar reverse">
            <a class="titlebar-button button white size32 radiusround outline titlebar-left" href="javascript:history.go(-1)">
                <i class="icon icon-arrowleft size20"></i>
            </a>
            <h1 class="titlebar-title text-center">titlebar圆形图标</h1>
            <div class="titlebar-right">
                <a class="titlebar-button button white size32 radiusround outline">
                    <i class="icon icon-rdoadd size20"></i>
                </a>
                <a class="titlebar-button button white size32 radiusround outline">
                    <i class="icon icon-search size20"></i>
                </a>
            </div>
        </div>
        <br/>
        <div class="titlebar reverse">
            <h1 class="titlebar-title" style="padding: 0 10px;">右按钮titlebar</h1>
            <a class="titlebar-button button white outline radius40" style="padding:0 8px;">按钮</a>
            <a class="titlebar-button button white outline radius40" style="padding:0 8px;">
                <i class="icon icon-gear size20"></i>
                <label>设置</label>
            </a>
        </div>
        <br/>
        <div class="titlebar reverse">
            <h1 class="titlebar-title" style="padding: 0 10px;">右图标titlebar</h1>
            <a class="titlebar-button">
                <i class="icon icon-rdoadd"></i>
            </a>
            <a class="titlebar-button">
                <i class="icon icon-search"></i>
            </a>
        </div>
        <br/>

        <div class="titlebar reverse">
            <a class="titlebar-button" href="javascript:back()">
                <i class="icon icon-arrowleft"></i>
                <span>返回</span>
            </a>
            <h1 class="titlebar-title text-center">传统titlebar</h1>
            <a class="titlebar-button">
                <span>搜索</span>
                <i class="icon icon-search"></i>
            </a>
        </div>
        <br/>
        <div class="titlebar reverse">
            <div class="inputbox inputbox-white radius40 bordered" style="margin:0 8px;" data-input="clear">
                <input type="search" placeholder="请输入搜索内容" class="search input-text">
                <i class="icon icon-clear-fill" style="margin-right: 4px;"></i>
            </div>
            <a class="titlebar-button">搜索</a>
        </div>

        <br/>

        <div class="titlebar reverse">
            <a class="titlebar-button"><i class="icon icon-shop-fill size30"></i></a>
            <h1 class="titlebar-title"></h1>
            <a class="titlebar-button">
                <i class="icon icon-search"></i>
            </a>
            <a class="titlebar-button">
                <i class="icon icon-rdouser"></i>
            </a>
        </div>
        <br/>
    </article>
    <script src="../scripts/lib/seedsui/seedsui.min.js"></script>
    <!--Exmobi能力-->
    <!--<script src="../scripts/lib/exmobi/exmobi.js"></script>-->
    <script>
	//定义exmobi返回
	function back(){history.go(-1);}
	</script>
</body>
</html>
